<!--快递地址-->
<template>
  <!-- 收货地址 -->
  <!-- <SelectAddressDialog
    v-model="data.dialogAddrVisible"
    :type="data.type"
    :title="data.title"
    :addressList="data.shippingAddress"
    :expressDeliveryData="data.expressDeliveryObj"
    @getAddressList="getAddressList"
    @cancel="cancelAddr"
    @selected="onSelected"
  /> -->
</template>
<script setup>
import Sections from '@/components/Sections/index.vue';
import SelectAddressDialog from '@/components/SelectAddressDialog/index.vue';
import { reactive, onMounted } from 'vue';
import { listAddress } from '@/server/api/biz.js';
import { scrollToSection } from '@/utils/common.js';
const props = defineProps({
  expressDeliveryList: {
    type: Array,
    default: () => [],
  },
  expressDeliveryData: {
    type: Object,
    default: () => {},
  },
  isShow: {
    type: Boolean,
    default: false,
  },
  type: {
    type: String,
    default: '',
  },
});
const emit = defineEmits(['expressDeliveryChange', 'selected']);
const data = reactive({
  isShow: false,
  expressDelivery: '',
  receiptInfo: {
    useType: 1,
    country: '',
    province: '',
    city: '',
    zone: '',
    address: '',
    lastName: '',
    name: '',
    phone: '',
  },
  expressDeliveryObj: {},
});

const rule = {
  expressDelivery: [
    { required: true, message: t('mall.select_courier_company'), trigger: ['blur', 'change'] },
  ],
};

const expressChange = (item) => {
  data.expressDeliveryObj = item;
  data.expressDelivery = item.id;
  emit('expressDeliveryChange', item, data.expressDelivery);
  if (props.type != 'pcb') {
    sessionStorage.setItem('expressDeliveryObj', JSON.stringify(item));
  }
};

const getExpressDelivery = () => {
  scrollToSection('#expressDelivery');
};

defineExpose({
  getExpressDelivery,
});
onMounted(() => {
  if (props.type != 'pcb') {
    deliveryAddressCache();
  }
});

/**
 * 回显缓存地址信息
 */
const deliveryAddressCache = () => {
  data.expressDeliveryObj = JSON.parse(sessionStorage.getItem('expressDeliveryObj')) || {};
  data.receiptInfo = JSON.parse(sessionStorage.getItem('receiptInfo')) || {};
  if (data.expressDeliveryObj) {
    expressChange(data.expressDeliveryObj);
  }
  if (data.receiptInfo) {
    emit('selected', data.receiptInfo);
  }
};

/**
 * 修改地址
 */
const changeAddr = (type) => {
  data.type = type;
  data.title = type === '1' ? t('smt.Shippingaddress') : t('mall.billing_address');
  getAddressList();
  data.dialogAddrVisible = true;
};

/**
 * 取消修改地址
 */
const cancelAddr = () => {
  data.dialogAddrVisible = false;
};

/**
 * 获取地址列表
 */
const getAddressList = () => {
  const obj = {
    useType: data.type,
    current: 1,
    pageSize: 10,
  };
  listAddress(obj).then((res) => {
    if (res.code === 200) {
      console.log('res', data.type);
      if (data.type == '1') {
        data.shippingAddress = res.data;
        // initAddrData(data.shippingAddress.records);
      }
      if (data.type == '2') {
        data.billingAddress = res.data;
        // initAddrDatas(data.billingAddress.records);
      }
    } else {
      // ElMessage.error(res.msg);
    }
  });
};

/**
 * 获取选中地址信息
 */
const onSelected = (info, type) => {
  console.log(info, 'edge');
  emit('selected', info);

  if (type == '1') {
    data.receiptInfo = info;
    if (props.type != 'pcb') {
      sessionStorage.setItem('receiptInfo', JSON.stringify(info));
    }
  } else {
    data.addrInfo = info;
  }
};
</script>
<style lang="scss" scoped>
.m-l-107 {
  margin-left: 7px;
}
.flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.text {
  width: 700px;
  color: #a6a6a6;
  font-size: 14px;
  padding-left: 5px;
}

.block-wrap {
  border-bottom: 1px solid #f5f5f5;
  display: flex;
  &:last-child {
    border: none;
  }

  .title-wrap {
    display: flex;
    justify-content: space-between;
    &.table-title {
      padding-top: 24px;
      padding-bottom: 12px;
    }
    .block-title {
      width: 121px;
      color: var(--mall-text-color-primary);
      font-size: 16px;
      font-weight: 500;
    }
    .edit-btn {
      display: flex;
      align-items: center;
      cursor: pointer;
      padding-left: 16px;
      font-size: 14px;
      color: #5255fe;
      > img {
        vertical-align: middle;
        width: 18px;
      }
      span {
        width: 30px;
      }
      > a {
        display: inline-block;
        padding-left: 14px;
        color: var(--mall-color-primary);
        font-family: 'SourceHanSansCN';
      }
    }
  }

  .row-item {
    // padding-top: 12px;
    color: var(--mall-text-color-primary);
    font-size: 14px;
    display: table-caption;
    .pay-icons-wrap {
      padding-left: 142px;
      .pay-icon {
        height: 24px;
        margin-bottom: 24px;
      }
      .pay-row {
        > img {
          height: 32px;
          margin-right: 12px;
        }
      }
    }
  }
}
</style>
